import { useContext, useEffect, useRef } from "react";
import type { FC, MutableRefObject, ReactNode } from "react";
import classNames from "classnames";
import styles from "./index.module.scss";
import { Context } from "./index";

interface IndexProps {
  children: (e: MutableRefObject<any>) => React.ReactElement;
  hasNoAddBtn: boolean;
}
const Index: FC<IndexProps> = ({ children, hasNoAddBtn }) => {
  const { setHeight, isOpen, heightRef } = useContext(Context);
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (ref.current) {
      // setTimeout(() => {
      //   const offsetHeight = ref.current?.offsetHeight;
      //   if (offsetHeight !== 0 && heightRef.current !== offsetHeight) {
      //     setHeight?.(offsetHeight);
      //   }
      // });
    }
  }, [children]);
  return (
    <div
      className={classNames(styles.mainItemBody, {
        [styles.hidden]: false,
        [styles.hasNoAddBtn]: hasNoAddBtn,
      })}
    >
      <div ref={ref} className={styles.inner}>
        {children(ref)}
      </div>
    </div>
  );
};

export default Index;
